<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside
        width="200px"
        style="background-color: rgb(238, 241, 246)"
      >
        <el-menu>
          <el-submenu
            v-for="(item,index) in leftList"
            :key="index+''"
            :index="item.id + ''"
          >
            <template slot="title"> <i
                style="padding-right: 10px"
                :class="item.icon"
              ></i>{{item.authName}}</template>

            <el-menu-item
              v-for="(arr,index) in item.children"
              :key="index+''"
              @click="saveNavState(arr.path)"
            >{{arr.authName}}
            </el-menu-item>

          </el-submenu>
        </el-menu>
      </el-aside>
      </el-main>
    </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 左侧菜单数据
      itemlist: [] // 没有子菜单的
    };
  },
  computed: {
    ...mapState(["leftList"]) // 映射
  },
  methods: {
    saveNavState(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped lang="less">
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
